<template>
  <a-modal :width="1000" v-model:visible="showChooseProductDialog" :footer="false" :title="title" title-align="start" :mask-closable="false" @cancel="closedDialog">
    <a-input-group>
      <a-select style="width: 110px" v-model="searchVal.keywordType">
        <a-option value="spu" label="SPU" />
        <a-option value="spuName" label="产品名称" />
      </a-select>
      <a-select style="width: 80px" v-model="searchVal.searchType">
        <a-option value="exact" label="精确" />
        <a-option value="fuzzy" label="模糊" />
      </a-select>
      <a-input-search :style="{ width: '260px' }" v-model="searchVal.keyword" placeholder="请输入" @search="getProductList" @press-enter="getProductList" allow-clear />
    </a-input-group>
    <div class="table-model-wrap" style="margin-top: 20px">
      <a-table size="mini" :data="productList" :scroll="{ y: 'calc(84vh - 200px)' }" :bordered="false" class="table-two-line table-model" :pagination="false">
        <template #columns>
          <a-table-column title="序号" :width="45">
            <template #cell="{ rowIndex }">
              <p>{{ rowIndex + 1 }}</p>
            </template>
          </a-table-column>
          <a-table-column title="图片" :width="60">
            <template #cell="{ record }">
              <ImgPopover :src="getPicUrl(record)">
                <template #con>
                  <a-image width="40" height="40" fit="contain" :src="getPicUrl(record)" />
                </template>
              </ImgPopover>
            </template>
          </a-table-column>
          <a-table-column title="SPU" :width="130" dataIndex="spu" />
          <a-table-column title="产品名称" :width="300">
            <template #cell="{ record }">
              <a-popover position="tl" style="width: 400px">
                <p class="text-limit-two">{{ record.spuName }}</p>
                <template #content>
                  <p>{{ record.spuName }}</p>
                </template>
              </a-popover>
            </template>
          </a-table-column>
          <a-table-column :width="100" title="类目">
            <template #cell="{ record }">
              <p>{{ $extract(record, 'category.name') }}</p>
            </template>
          </a-table-column>
          <a-table-column :width="100" title="产品开发员">
            <template #cell="{ record }">
              <p>{{ $extract(record, 'developer.name') }}</p>
            </template>
          </a-table-column>
          <a-table-column :width="100" title="操作">
            <template #cell="{ record }">
              <a-button type="text" size="mini" @click="chooseProduct(record)">选择</a-button>
            </template>
          </a-table-column>
        </template>
      </a-table>
    </div>
    <div class="pagination-footer">
      <a-pagination size="mini" :total="total" :default-page-size="searchVal.pageSize" :current="searchVal.pageNum" :page-size-options="[20, 50, 100, 200, 500]" show-total show-page-size @page-size-change="sizeChange" @change="changePage" />
    </div>
  </a-modal>
</template>
<script lang="ts" setup>
  import { ref, onMounted } from 'vue'
  import ImgPopover from '@/components/imgPopover.vue'
  import { getProductSPUList } from '@/api/product'

  const emit = defineEmits(['closed', 'success'])
  const props = defineProps({
    isShow: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
    },
  })
  onMounted(async () => {
    getProductList()
  })

  const showChooseProductDialog = ref(props.isShow)
  const searchVal = ref<any>({
    pageSize: 20,
    pageNum: 1,
    searchType: 'exact',
    keywordType: 'spu',
  })
  const total = ref(0)
  const productList = ref([])
  // 分页
  function changePage(val: number) {
    searchVal.value.pageNum = val
    getProductList()
  }
  function sizeChange(val: number) {
    searchVal.value.pageSize = val
    getProductList()
  }
  //产品列表数据
  async function getProductList() {
    const res: any = await getProductSPUList(searchVal.value)
    productList.value = res?.data?.records || []
    total.value = res?.data?.total || 0
  }
  // 显示图片
  function getPicUrl(item: any) {
    return item?.productPicList?.[0]?.url
  }
  // 选择产品
  function chooseProduct(item: any) {
    emit('success', item)
    emit('closed')
  }
  // 关闭
  function closedDialog() {
    showChooseProductDialog.value = false
    emit('closed')
  }
</script>
<style lang="less" scoped>
  .info-text {
    color: #999;
    margin-top: 10px;
  }
  .pagination-footer {
    margin-top: 20px;
  }
</style>
